<template>
  <div class="record">
    <div class="main">
      <div class="table" v-loading="loading">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{
            color: '#333333',
            backgroundColor: '#f3f3f3',
          }"
        >
          <el-table-column label="用户头像">
            <template slot-scope="scope">
              <img class="imgs" :src="scope.row.avatar" alt="" />
            </template>
          </el-table-column>

          <el-table-column prop="nickname" label="用户昵称"> </el-table-column>

          <el-table-column prop="phone" label="手机号码"> </el-table-column>

          <el-table-column label="奖品图片">
            <template slot-scope="scope">
              <img class="imgs" :src="scope.row.welfareLuckyIcon" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="welfareLuckyName" label="奖品名称">
          </el-table-column>
          <el-table-column label="奖品类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.welfareLuckyType == 0">积分</el-tag>
              <el-tag v-if="scope.row.welfareLuckyType == 1" type="warning"
                >实物</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="welfareLuckyIntegral" label="奖品积分">
          </el-table-column>
          <el-table-column prop="welfareLuckyRate" label="中奖概率（%）">
          </el-table-column>
          <el-table-column prop="" label="核销状态" width="150">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" type="info">未核销</el-tag>

              <el-tag v-else type="success">已核销</el-tag>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <div class="operation">
                <div
                  class="list"
                  @click.prevent="deleteHit(scope.row)"
                  v-if="scope.row.status == 0"
                >
                  核销
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="tableDataTotal"
            :current-page="page"
          >
          </el-pagination>
        </div>
      </div>

      <!--处理弹出框-->
      <div class="delete">
        <el-dialog
          title="删除"
          :visible.sync="deleteVisible"
          :before-close="deleteClose"
        >
          <div class="delete-title">是否确认核销？</div>
          <div class="delete-attachment">
            <div class="list" @click="deleteClose">取消</div>
            <div class="list" @click="deleteConfirm">确定</div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { welfarelogLuckyList, welfarelogLuckyListPut } from "@/api/welfare";

export default {
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      loading: false,
      commonObj: {},
      //-------
      deleteVisible: false,
    };
  },
  created() {
    this.welfarelogLuckyListMet();
  },
  methods: {
    welfarelogLuckyListMet() {
      let params = {
        pageSize: this.limit,
        pageNo: this.page,
      };

      welfarelogLuckyList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.welfareLuckyLogList.forEach((item, index) => {
            item.welfareLuckyRate = Number(item.welfareLuckyRate / 10000);
          });

          this.tableData = res.resultData.welfareLuckyLogList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    //---------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.welfareLuckyLogId;

      welfarelogLuckyListPut(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("核销成功！");
          this.loading = true;
          this.welfarelogLuckyListMet();
        }
      });
    },
    //-------------------------------------------------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.welfarelogLuckyListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.welfarelogLuckyListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/delete.less");
.record {
  .main {
  }
}
</style>